import React from "react";
import {
    AutoCenter,
    Button,
    Card, Collapse,
    DatePicker,
    Divider,
    Grid, Mask,
    Popup,
    PullToRefresh, SearchBar,
    Space,
    Tag,
    Toast
} from "antd-mobile";
import {sleep} from "antd-mobile/es/utils/sleep";
import moment, {now} from "moment";

export  default  class  extends  React.Component{
    constructor(props) {
        super(props);
        this.state = {
            dailyPlan:[],
            planDate:'',
            dateSelecterIsVisable:false,
            proxyPopupIsVisable:false,
            planPopupIsVisable:false,

        }
    }

    getPlanList = ()=>{
        const nowDataTime = new Date()
        const today = moment(nowDataTime).format('YYYYMMDD')


        const url3 ='http://htjoa.nrnet.cn/dc14/construct/plan/dailyplanList?date='+today;
        fetch(url3,{method:"GET"
        })
            .then(res=>res.json()).then(result=>{
           console.log(result[31])
            this.setState({dailyPlan:result})
        })

    }

    showPopUp  = ()=>{
        this.setState({proxyPopupIsVisable:true})
    }

    componentDidMount() {
        document.title='日计划查询'
        this.getPlanList()
    }

    render() {



        return (
            <div>
            <Space  align='center' style={{marginTop:"20px",marginLeft:"20px"}}>
                <Button

                    color='primary' fill='outline'
                    onClick={() => {
                        this.setState({dateSelecterIsVisable:true})
                    }}
                >
                    选择日期
                </Button>


                <DatePicker
                    title='时间选择'
                    visible={this.state.dateSelecterIsVisable}
                    onClose={() => {
                        this.setState({dateSelecterIsVisable:false})
                    }}
                    onConfirm={val => {
                        const date = moment(val).format('YYYYMMDD')


                        const url3 ='http://htjoa.nrnet.cn/dc14/construct/plan/dailyplanList?date='+date;
                        fetch(url3,{method:"GET"
                        })
                            .then(res=>res.json()).then(result=>{
                            console.log(result[31])
                            this.setState({dailyPlan:result})
                        })


                        this.setState({dateSelecterIsVisable:false})
                        this.setState({planDate:date})
                    }}
                />
                <div style={{fontSize:'larger'}}> {this.state.planDate}</div>



            </Space>
            <div   style={{marginLeft:"20px",marginRight:"20px",marginTop:'10px'}}>

            {/*<SearchBar*/}
            {/*        placeholder='按计划号查找'*/}
            {/*        showCancelButton*/}
            {/*        onSearch={val => {*/}
            {/*            Toast.show(`你搜索了：${val}`)*/}
            {/*            */}
            {/*        }}*/}
            {/*        onFocus={() => {*/}
            {/*            Toast.show('获得焦点')*/}
            {/*        }}*/}
            {/*        onBlur={() => {*/}
            {/*            Toast.show('失去焦点')*/}
            {/*        }}*/}
            {/*        onClear={() => {*/}
            {/*            Toast.show('清空内容')*/}
            {/*        }}*/}
            {/*        onCancel={() => {*/}
            {/*            Toast.show('取消搜索')*/}
            {/*        }}*/}
            {/*    />*/}
            </div>
            <PullToRefresh
                onRefresh={async () => {
                    this.getPlanList()
                }}
            >
                <Divider/>

            {this.state.dailyPlan.map((element,index)=>{
                return(<div>
                    <Card
                        style={{marginLeft:"10px",marginRight:"10px"}}
                        title={ <Grid columns={10} gap={8}
                                        style={{padding: '0px'}}>
                        <Grid.Item span={8}>
                            计划编号： {element["code"]}
                        </Grid.Item>
                        <Grid.Item>
                            {
                                element["proxy"].length === 0 ? (
                                        <Tag color='success'
                                             fill='outline'>未委托</Tag>)
                                        : (<Tag color='warning'
                                                fill='outline'>已委托</Tag>)
                            }
                        </Grid.Item>
                    </Grid>}>
                        <p>计划名称： {element["project"]}  </p>
                        <p>计划时间： {element["planDate"]}</p>
                        <p>计划包保人： {element["auditor"]}</p>
                        <p>包保人电话： {element["auditor_tel"]}</p>





                        {
                            element["proxy"].length > 0 ?(

                                <div>
                                    <Collapse >
                                        <Collapse.Panel style={{fontSize:"13px"}} key='1' title='计划详情'>
                                            <p>施工时间： {element["do_time"]}</p>
                                            <p>施工地址： {element["location"]}</p>
                                            <p>施工长度： {element["length"]}</p>
                                            <p>施工类型： {element["condition_limit"]}</p>
                                            <p>施工单位： {element["do_unit"]}</p>
                                            <p>配合组织： {element["work_help"]}</p>
                                            <p>计划备注： {element["xh"]} </p>
                                        </Collapse.Panel>
                                    </Collapse>


                                    <AutoCenter style={{marginTop:"10px"}}>
                                    <Button size='mini' color='primary' fill='outline' onClick={()=>{
                                        this.setState({proxyPopupIsVisable:true})
                                    }}> 查看委托详情</Button>

                                    </AutoCenter>
                                    <Popup
                                        visible={this.state.proxyPopupIsVisable}
                                        onMaskClick={() => {
                                            this.setState({proxyPopupIsVisable:false})
                                        }}
                                        bodyStyle={{ height: '40vh' }}
                                    >

                                        {

                                            element["proxy"].map((elem,inde)=>{



                                                return(
                                                    <div style={{marginLeft:"10px",marginRight:"10px"}}>
                                                        <Divider  contentPosition='left'> <Space  style={{ '--gap': '190px' }}><div>委托序号： {inde+1}</div><div></div></Space>                                                                               {
                                                            elem["status"] === 0 ? (
                                                                    <Tag color='default'
                                                                         fill='outline'>未处理</Tag>)
                                                                : elem["status"] === 1 ? (
                                                                        <Tag color='success'
                                                                             fill='outline'>已接受</Tag>)
                                                                    : (<Tag color='warning'
                                                                            fill='outline'>已拒绝</Tag>)
                                                        }
                                                        </Divider>
                                                        <p>委托人： {elem["entrustName"]}</p>
                                                        <p>受托人： {elem["entrustedName"]}</p>
                                                        <p>原因： {elem["reason"]}</p>
                                                    </div>
                                                )
                                            })
                                        }

                                    </Popup>







                                </div>

                            ):(

                                <div>

                                    <Collapse >
                                        <Collapse.Panel style={{fontSize:"13px"}} key='1' title='计划详情'>
                                            <p>施工时间： {element["do_time"]}</p>
                                            <p>施工地址： {element["location"]}</p>
                                            <p>施工长度： {element["length"]}</p>
                                            <p>施工类型： {element["condition_limit"]}</p>
                                            <p>施工单位： {element["do_unit"]}</p>
                                            <p>配合单位： {element["work_help"]}</p>
                                            <p>计划备注： {element["xh"]} </p>
                                        </Collapse.Panel>
                                    </Collapse>


                            {/*    <Button size='mini' color='primary' fill='outline' onClick={()=>{*/}
                            {/*    this.setState({planPopupIsVisable:true})}*/}
                            {/*} >*/}
                            {/*    计划详情*/}
                            {/*</Button>*/}


                                    {/*<Mask*/}
                                    {/*    isible={this.state.planPopupIsVisable} onMaskClick={() => this.setState({planPopupIsVisable:false})}>*/}
                                    {/*    <div>内容</div>*/}
                                    {/*</Mask>*/}


                                    {/*<Popup*/}
                                    {/*    visible={this.state.planPopupIsVisable}*/}
                                    {/*    onMaskClick={() => {*/}
                                    {/*        this.setState({planPopupIsVisable:false})*/}
                                    {/*    }}*/}
                                    {/*    bodyStyle={{ height: '40vh' }}*/}
                                    {/*>*/}
                                    {/*    <p>计划备注： {element["xh"]} </p>*/}
                                    {/*</Popup>*/}

                                </div>





                            )
                        }




                    </Card>

                    </div>


                )

            })}

            </PullToRefresh>



        </div>




        )
    }
}